<template>
	<view class="index-page">
		<!-- 列表内容 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<view slot="top">
				<view class="top-box">
					<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
					<view :style="{ height: $u.addUnit(30 + $u.sys().statusBarHeight, 'px'), }"></view>
					<view class="nav-box">
						<!-- 顶部导航 -->
						<view class="location" @click="selectAddress">
							<u-icon name="map-fill" size="16" color="#000000"></u-icon>
							<text style="margin: 0 10rpx; font-size: 28rpx">
								{{ searchData.city_id ? searchData.city_name : "获取中" }}
							</text>
							<u-icon name="arrow-down" size="16" color="#000000"></u-icon>
						</view>
						<view class="position" @click="againGetLocation">
							<text style="margin: 0 10rpx; font-size: 28rpx">重新定位</text>
							<u-icon name="reload" size="16" color="#9451F3"></u-icon>
						</view>
					</view>
					<!-- 分类标签栏 -->
					<view class="tabs-box">
						<view class="tab-list">
							<u-subsection
								class="custom-subsection"
								:list="tabs"
								:current="currentTab"
								fontSize="28rpx"
								bgColor="transparent"
								activeBg="#FEECFF"
								activeColor="#F169F6"
								@change="sectionChange">
							</u-subsection>
						</view>
						<view class="filter" @click="selectSearch">
							<u-icon name="list" size="18" color="#666"></u-icon>
							<text style="font-size: 28rpx">筛选</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 人员信息列表 -->
			<view class="list-box" v-if="false">
				<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="lookUserDetail(item)">
					<view class="item-left">
						<view class="real-user" v-if="item.is_auth == 1">
							<image class="real-icon" src="../../static/common/real_user.png"></image>
						</view>
						<view :class="item.logintime_text == '在线' ? 'on-line line-green' : 'on-line line-yellow'"
							v-if="item.logintime_text">
							<view :class="item.logintime_text == '在线' ? 'dot dot-green': 'dot dot-yellow'"></view>
							{{ item.logintime_text }}
						</view>
						<image class="main-img" :src="item.avatar" mode="aspectFill" :lazyLoad="true"></image>
					</view>
					<view class="item-right">
						<view class="user-info">
							<view class="name-box">
								<text style="font-size: 32rpx">{{ item.nickname }}</text>
								<image v-if="item.vip" src="static/common/icon_vip.png" alt=""
									style="width: 80rpx; height: 24rpx; margin-left: 8rpx" ></image>
							</view>
							<view class="detail">
								<text style="font-size: 24rpx">
									{{ item.city }} |{{ " " }}
									<text v-if="item.work">{{ item.work }} |{{ " " }}</text>
									{{ item.age }}岁
								</text>
							</view>
							<view class="likeness" v-if="item.auth" @click.stop="showSimilarity = true">
								相似度 {{ item.head_xsd || 0 }}%
							</view>
							<view class="sub-images" v-if="item.images.length">
								<image v-for="(imgUrl, index) in item.images.slice(0, 3)" :key="index" :src="imgUrl.data" alt=""
									style="height: 100rpx; width: 80rpx; border-radius: 14rpx" />
							</view>
							<view class="sub-tips" v-else>
								<!-- 该用户还未进行资料完善 -->
							</view>
						</view>
						<view class="like" @click.stop="friendsFollow(item)" v-if="!item.is_focus_count">
							<image class="icon-image" src="../../static/common/icon_heart.png"></image>
							<text style="margin-left: 6rpx; font-size: 20rpx">喜欢</text>
						</view>
						<view class="private-chat" @click.stop="privateChat(item)" v-if="item.is_focus_count">
							<image class="icon-image" src="../../static/common/icon_private.png"></image>
							<text style="margin-left: 6rpx; font-size: 20rpx">私聊</text>
						</view>
					</view>
				</view>
			</view>
			<view class="user-grid" v-if="currentTab == 2">
				<view class="user-card" v-for="(user, index) in dataList" :key="index" @click.stop="lookUserDetail2(user)">
					<image :class="userInfo.vip ? 'blur-image' : 'blur-image filter8'" :src="user.avatar" v-if="isLogin && userInfo.gender == 1" mode="aspectFill"></image>
					<image :class="userInfo.is_auth == 1 ? 'blur-image' : 'blur-image filter8'" :src="user.avatar" v-if="isLogin && userInfo.gender == 2" mode="aspectFill"></image>
					<image class="blur-image filter8" :src="user.avatar" v-if="!isLogin" mode="aspectFill"></image>
					<view class="user-box">
						<view class="vip-tag" v-if="isLogin && userInfo.gender == 1 && !userInfo.vip">
							<image class="image" src="../../static/common/icon_vip2.png"></image>
							<text>仅会员可查看</text>
						</view>
						<view class="vip-tag" v-if="isLogin && userInfo.gender == 2 && !userInfo.is_auth == 1">
							<image class="image" src="../../static/common/icon_vip2.png"></image>
							<text>真人认证可查看</text>
						</view>
						<view class="user-info">
							<text class="name">{{user.nickname }}</text>
							<text class="new-tag">新人</text>
						</view>
						<view class="user-detail">
							<text>{{ user.age }}岁</text>
							<text class="divider">|</text>
							<text>{{ user.city }}</text>
							<text class="divider" v-if="item.work">|</text>
							<text class="distance" v-if="item.work">{{ user.work }}</text>
						</view>
						<view :class="userInfo.vip ? 'user-photos' : 'user-photos filter4'" v-if="isLogin && userInfo.gender == 1">
							<u-album :urls="user.images" maxCount="3" :multipleSize="28" :singleSize="28" :previewFullImage="false" keyName="data"></u-album>
						</view>
						<view :class="userInfo.is_auth == 1 ? 'user-photos' : 'user-photos filter4'" v-if="isLogin && userInfo.gender == 2">
							<u-album :urls="user.images" maxCount="3" :multipleSize="28" :singleSize="28" :previewFullImage="false" keyName="data"></u-album>
						</view>
					</view>
				</view>
			</view>
			<!-- 人员信息改版优化 -->
			<view class="list-box1" v-if="currentTab != 2"  @touchstart="touchStart"
            @touchend="touchEnd">
				<view class="list-item1" v-for="(item, index) in dataList" :key="index" @click="lookUserDetail(item)">
					<image class="main-img1" :src="item.avatar" mode="aspectFill" :lazyLoad="true"></image>
					<view class="item-content">
						<view class="likeness" v-if="item.auth" @click.stop="showSimilarity = true"><span>相似度</span> {{ item.head_xsd || 0 }}%</view>
						<view class="user-info">
							<view class="name-box">
								<text style="font-size: 32rpx">{{ item.nickname }}</text>
								<image v-if="item.vip" src="static/common/icon_vip.png" alt="" style="width: 80rpx; height: 24rpx; margin-left: 8rpx" ></image>
							</view>
							<view class="detail">
								<text style="font-size: 24rpx">
									{{ item.city }} |{{ " " }}
									<text v-if="item.work">{{ item.work }} |{{ " " }}</text>
									{{ item.age }}岁
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<unLockPopup
			:show="showUnLock"
			@close="showUnLock = false"
			@success="unLockSuccess"
			:to_user_id="unLockDetail && unLockDetail.id">
		</unLockPopup>
		<userPopup
			:show="showUser"
			@close="showUser = false"
			@followSuccess="followSuccess"
			:user_id="userDetail && userDetail.id">
		</userPopup>
		<vipPopup
			:show="showVip"
			@close="showVip = false"
			@success="vipRechageSuccess">
		</vipPopup>
		<authentication
			:show="showAuth"
			@close="showAuth = false"
			@success="authSuccess">
		</authentication>
		<similarityPopup
			:show="showSimilarity"
			@close="showSimilarity = false">
		</similarityPopup>
		<newPopup
			:show="showNew"
			@close="showNew = false"
			@success="vipReceiveSuccess">
		</newPopup>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	// #ifdef H5
	import wxsdk from "@/utils/wechat/sdk.js";
	// #endif
	import { HTTP_REDIRECT_URL } from "@/config/app";
	import unLockPopup from "@/components/UnLockPopup.vue";
	import userPopup from "@/components/UserPopup.vue";
	import vipPopup from "@/components/VipPopup.vue";
	import authentication from "@/components/Authentication.vue";
	import similarityPopup from "@/components/SimilarityPopup.vue";
	import newPopup from "@/components/NewPopup.vue";
	export default {
		data() {
			return {
				tabs: ["同城", "视频"],
				currentTab: 0,
				dataList: [],
				longitude: "",
				latitude: "",
				searchData: {
					city_id: "",
					distance: "",
					age: "",
					head_xsd: "",
					hy_status: "",
				},
				userInfo: null,
				pageBg: "/static/common/page_bg2.png",
				showUnLock: false,
				unLockDetail: null,
				vipDetail: null,
				showUser: false,
				userDetail: null,
				showVip: false,
				showAuth: false,
				showSimilarity: false,
				showNew: false,
			};
		},
		components: {
			newPopup: newPopup,
			vipPopup: vipPopup,
			userPopup: userPopup,
			unLockPopup: unLockPopup,
			authentication: authentication,
			similarityPopup: similarityPopup,
		},
		computed: mapGetters(["isLogin"]),
		onLoad(options) {
			// #ifdef H5
			const currentUrl = window.location.href;
			const queryString = currentUrl.split("#")[0].split("?")[1];
			const parsedUrl = new URLSearchParams(queryString);
			const code = parsedUrl.get("code");
			if (code && this.isLogin) {
				this.bindWechat(code);
			}
			if (options && options.parent_user_id) {
				uni.setStorageSync("parent_user_id", options.parent_user_id);
			}
			this.getShareConfig();
			// #endif
		},
		onBackPress() {
			if (this.showUser) {
				this.showUser = false;
			}
		},
		onShow() {
			this.getLocationData();
		},
		methods: {
      touchStart(e) {
        this.startX = e.touches[0].clientX;
      },
      touchEnd(e) {
        const endX = e.changedTouches[0].clientX;
        if (this.startX - endX > 100) { // 右滑距离阈值
          uni.navigateTo({
            url: '/pages/index/videoPlay'
          });
        }
      },
			getShareConfig() {
				this.$Api["common"]
					.getUserConfig({
						site: "share",
					})
					.then((res) => {
						// 构造分享的路径
						const sharePath = this.isLogin && this.userInfo ? `${HTTP_REDIRECT_URL}/#/pages/index/index?parent_user_id=${this.userInfo.id}` : HTTP_REDIRECT_URL;
						// 调用分享方法
						wxsdk.share({
								title: res.data.share_title,
								desc: res.data.share_desc,
								image: res.data.share_img,
								path: sharePath,
							},
							(response) => {
								console.log(response);
							}
						);
					});
			},
			//重新定位
			againGetLocation() {
				uni.removeStorageSync("latitude");
				uni.removeStorageSync("longitude");
				this.getLocationData("new");
			},
			// 使用 async 函数包裹逻辑，方便异步处理
			async getLocationData(type) {
				// 尝试从缓存获取位置信息
				const cached = await this.getCachedLocation();
				// 定义位置获取成功后的统一处理函数
				const handleLocationSuccess = (res) => {
					console.log(res, "res");
					// 存储新位置到本地（仅当获取到新位置时存储）
					if (!cached.latitude || !cached.longitude) {
						uni.setStorageSync("latitude", res.latitude);
						uni.setStorageSync("longitude", res.longitude);
					}

					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.getLocation(type); // 获取位置详情
					this.isLogin && this.updateUserInfo(); // 已登录则更新信息
				};

				// 如果有缓存位置直接使用
				if (cached.latitude && cached.longitude) {
					handleLocationSuccess(cached);
				} else {
					// 无缓存时请求新位置
					const res = await this.requestNewLocation();
					if (!res.latitude || !res.longitude) {
						res.latitude ='39.904030';
						res.longitude='116.407526';
				    }
					handleLocationSuccess(res);
				}
			},
			// 获取缓存位置（Promise封装）
			getCachedLocation() {
				return new Promise((resolve) => {
					const lat = uni.getStorageSync("latitude");
					const lng = uni.getStorageSync("longitude");
					resolve({
						latitude: lat || "",
						longitude: lng || "",
					});
				});
			},
			// 请求新位置（Promise封装）
			requestNewLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						geocode: true,
						type: "wgs84",
						success: resolve,
						fail: (err) => {
							reject(new Error(`获取位置失败: ${err.errMsg || "未知错误"}`));
						},
					});
				});
			},
			bindWechat(code) {
				this.$Api["user"]
					.bindWechat({
						code: code,
					})
					.then((res) => {
						location.replace(HTTP_REDIRECT_URL);
					});
			},
			//提交认证
			authSuccess() {
				this.showAuth = false;
				this.$Tips("/pages/authentication/authentication");
			},
			//vip充值成功
			vipRechageSuccess() {
				this.showVip = false;
				this.getUserInfo(2);
			},
			//vip领取功
			vipReceiveSuccess() {
				this.showNew = false;
				this.getUserInfo(2);
			},
			//关注成功
			followSuccess() {
				this.$refs.paging.refresh();
			},
			//选择地址
			selectAddress() {
				if (!this.isLogin) {
					return this.$Tips("/pages/login/login");
				}
				if (this.userInfo.gender == 1) {
					if (!this.userInfo.vip) {
						this.showVip = true;
					} else {
						this.$Tips("/pages/index/select-address");
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.$Tips("/pages/index/select-address");
					}
				}
			},
			//选择搜索条件
			selectSearch() {
				if (!this.isLogin) {
					return this.$Tips("/pages/login/login");
				}
				if (this.userInfo.gender == 1) {
					if (!this.userInfo.vip) {
						this.showVip = true;
					} else {
						this.$Tips("/pages/index/select-search");
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.$Tips("/pages/index/select-search");
					}
				}
			},
			lookUserDetail(item) {
				this.userDetail = item;
				this.showUser = true;
			},
			lookUserDetail2(item) {
				this.userDetail = item;
				if (this.userInfo.gender == 1) {
					if (!this.userInfo.vip) {
						this.showVip = true;
					} else {
						this.showUser = true;
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.showUser = true;
					}
				}
			},
			unLockSuccess(id) {
				this.showUnLock = false;
				this.$refs.paging.refresh();
				this.$Tips("/pages/message/chart-message?user_id=" + id);
			},
			confirmUserUnLock(user_id) {
				this.$Api["user"]
					.subUserUnLock({
						to_user_id: user_id,
						type: "1",
					})
					.then((res) => {
						this.unLockSuccess(user_id);
					});
			},
			privateChat(item) {
				if (!this.isLogin) {
					return this.$Tips("/pages/login/login");
				}
				this.unLockDetail = item;
				if (this.userInfo.gender == 1) {
					if (item.is_unlock) {
						this.$Tips("/pages/message/chart-message?user_id=" + item.id);
					} else if (!item.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(item.id);
					} else {
						this.showUnLock = true;
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.$Tips("/pages/message/chart-message?user_id=" + item.id);
					}
				}
			},
			getUserInfo(type) {
				this.$Api["user"].getUserInfo().then((res) => {
					this.userInfo = res.data;

					// #ifdef H5
					this.getShareConfig();
					// #endif
					if (res.data.gender == 0) {
						return this.$Tips("/pages/mine/select-sex");
					}
					if (res.data.gender == 1 && !res.data.parent_user_id) {
						return this.$Tips("/pages/mine/improve-user");
					}
					if (type == 1 && this.userInfo.is_tiyan == 2) {
						this.showNew = true;
					}
				});
			},
			//用户关注
			friendsFollow(item) {
				if (!this.isLogin) {
					return this.$Tips("/pages/login/login");
				}
				this.$Api["user"]
					.friendsFollow({
						user_id: item.id,
					})
					.then((res) => {
						this.$refs.paging.refresh();
					});
			},
			sectionChange(index) {
				// this.currentTab = index;
				if(index === 0) {
					this.dataList = [];
					this.refreshList();
				} else {
					uni.navigateTo({
						url:'/pages/index/videoPlay'
					})
				}
			},
			updateUserInfo() {
				this.$Api["user"]
					.updateUserInfo({
						lng: this.longitude.toString(),
						lat: this.latitude.toString(),
					})
					.then((res) => {
						//保存用户经纬度
						this.getUserInfo(1);
					});
			},
			getLocation(type) {
				this.$Api.common
					.getCityByLat({
						lng: this.longitude.toString(),
						lat: this.latitude.toString(),
					})
					.then((res) => {
						let searchData = uni.getStorageSync("searchData") || {};
						// 确定是否需要更新城市数据
						const shouldUpdate =
							type === "new" || (!searchData.city_id && type !== "new");
						if (shouldUpdate) {
							// 统一更新逻辑
							const updatedData = {
								...searchData,
								city_id: res.data.id,
								city_name: res.data.name,
							};
							// 持久化存储
							uni.setStorageSync("searchData", updatedData);
							this.searchData.city_id = updatedData.city_id;
							this.searchData.city_name = updatedData.city_name;
						} else {
							// 非更新场景直接同步存储数据
							this.searchData.city_id = searchData.city_id;
							this.searchData.city_name = searchData.city_name;
						}
						this.$refs.paging.refresh();
					});
			},
			handleTabClick(index) {
				this.currentTab = index;
			},
			refreshList() {
				this.$refs.paging.scrollToTop();
				this.$refs.paging.refresh();
			},
			queryList(pageNo, pageSize) {
				let searchData = uni.getStorageSync("searchData");
				let data = {
					page: pageNo,
					limit: pageSize,
					type: this.currentTab + 1,
					...searchData,
				};
				if (this.currentTab == 3 || this.currentTab == 4) {
					data.city_id = "";
				}
				this.$Api.user
					.getUserList(data)
					.then((res) => {
						this.$refs.paging.complete(res.data.data);
					})
					.catch((res) => {
						this.$refs.paging.complete(false);
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.index-page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffffff;
	}

	.top-box {
		position: relative;

		.pageBg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 176rpx;
		}

		.nav-box {
			display: flex;
			align-items: center;
			padding: 0rpx 30rpx 22rpx;
			position: relative;
			z-index: 10;

			.location,
			.position {
				display: flex;
				align-items: center;
				margin-right: 40rpx;
				font-size: 28rpx;
				color: #323334;
			}

			.location {
				font-weight: bold;
			}

			.position {
				color: #9451f3;
			}
		}

		.tabs-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 14rpx;
			height: 48rpx;
			position: relative;
			z-index: 10;

			.tab-list {
				width: 30%;
			}

			.filter {
				display: flex;
				align-items: center;
				gap: 4rpx;
				font-size: 28rpx;
				color: #666;
				margin-right: 10rpx;
			}
		}

	}

	.list-item {
		display: flex;
		justify-content: start;
		align-items: flex-start;
		padding: 20rpx 20rpx 0;
		margin-bottom: 18rpx;
		background: #fff;
		border-radius: 12rpx;

		.item-left {
			position: relative;
			width: 200rpx;
			height: 262rpx;
			margin-right: 26rpx;
			padding-bottom: 22rpx;
			padding-top: 10rpx;

			.real-user {
				position: absolute;
				left: 0;
				top: 0;
				width: 72rpx;
				height: 26rpx;
				background: #f169f6;
				border-radius: 6rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;

				.real-icon {
					width: 72rpx;
					height: 26rpx;
				}
			}

			.on-line {
				position: absolute;
				right: 0;
				top: 10rpx;
				padding: 0 10rpx;
				height: 26rpx;
				padding: 4rpx 4rpx;
				background: rgba(#000000, 0.5);
				border-radius: 0 14rpx 0rpx 14rpx;
				z-index: 10;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.dot {
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					margin-right: 4rpx;
				}
			}

			.line-green {
				color: #28c445;
			}

			.dot-green {
				background: #28c445;
			}

			.line-yellow {
				color: #ffc210;
			}

			.dot-yellow {
				background: #ffc210;
			}

			.main-img {
				position: relative;
				width: 200rpx;
				height: 252rpx;
				margin-right: 20rpx;
				border-radius: 14rpx;
			}
		}

		.item-right {
			flex: 1;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 2rpx solid #e6e5e5;
			padding-bottom: 22rpx;
			padding-top: 20rpx;

			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				flex: 1;
				height: 262rpx;

				.likeness {
					background: #f169f6;
					border-radius: 14rpx;
					text-align: center;
					font-size: 18rpx;
					width: fit-content;
					color: #ffffff;
					padding: 6rpx 10rpx;
					margin-top: 10rpx;
				}

				.sub-images {
					display: flex;
					flex-direction: row;
					gap: 10rpx;
					margin-top: 10rpx;
				}

				.sub-tips {
					font-size: 20rpx;
					color: #999;
					margin-top: 10rpx;
				}

				.sub-images image {
					width: 55rpx;
					height: 55rpx;
					border-radius: 4rpx;
				}

				.name {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 16px;
					font-weight: bold;
					color: #333;
				}

				.vip {
					font-size: 12px;
					color: #ff69b4;
					border: 1px solid #ff69b4;
					padding: 0 4rpx;
					border-radius: 4rpx;
				}

				.detail {
					font-size: 12px;
					color: #999;
					padding: 10rpx 0;
				}
			}

			.icon-image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
			}

			.like {
				width: 104rpx;
				height: 44rpx;
				background: #feecff;
				border-radius: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #ff69b4;
				margin-top: 40rpx;
			}

			.private-chat {
				width: 104rpx;
				height: 44rpx;
				background: #e9d9ff;
				border-radius: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #9451f3;
				margin-top: 40rpx;
			}
		}
	}

	.list-box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx;
		.list-item1{
			width: 48%;
			position: relative;
			.main-img1{
				width: 100%;
				border-radius: 12rpx;
			}
			.item-content{
				position: absolute;
				bottom: 15px;
				left: 10px;
				.likeness {
					width: 75px;
					height: 18px;
					background: url('../../static/common/xiangsi.png') no-repeat center;
					background-size: 100% 100%;
					line-height: 18px;
					margin-bottom: 10px;
					font-size: 12px;
					text-align: center;
					padding-right: 10px;
					color: #ffffff;
          display: flex;
          justify-content: space-between;
					span{
						color: #714547;
						//padding-right: 15px;
					}
				}
				.user-info{
					color: #ffffff;
				}
			}
		}
	}
	.user-grid {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 20rpx;
	}

	.user-card {
		width: 336rpx;
		height: 336rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		background-size: 100% 100%;
		color: #ffffff;

		.blur-image {
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 100%;
		}

		.filter4 {
			filter: blur(4rpx);
		}

		.filter8 {
			filter: blur(8rpx);
		}

		.user-box {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 10;
		}

		.vip-tag {
			position: absolute;
			top: 20rpx;
			left: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #4b140d;
			border-radius: 8rpx;
			padding: 8rpx 10rpx;
			height: 36rpx;

			.image {
				width: 24rpx;
				height: 20rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 13px;
				color: #ffd35e;
			}
		}

		.user-info {
			padding: 160rpx 20rpx 10rpx 26rpx;
			display: flex;
			align-items: center;

			.name-box {
				font-size: 30rpx;
				font-weight: bold;
			}

			.new-tag {
				margin-left: 12rpx;
				width: 56rpx;
				padding: 10rpx 0;
				background-color: #f169f6;
				font-size: 20rpx;
				color: #ffffff;
				border-radius: 6rpx;
				text-align: center;
			}
		}

		.user-detail {
			padding: 0 10rpx 20rpx 26rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.divider {
				margin: 0 10rpx;
			}

			.distance {
				color: #f169f6;
			}
		}

		.user-photos {
			display: flex;
			padding: 0 20rpx 20rpx;

			.photo-item {
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;
				background-color: #f0f0f0;
				border-radius: 8rpx;
			}
		}
	}
</style>
